<template>
  <div>
    <!-- 卡片组件 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑组件 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>馆藏图书管理</el-breadcrumb-item>
          <el-breadcrumb-item>图书信息管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 布局组件，给表格添加工具栏 -->
      <el-row :gutter="10">
        <el-col :span="6">
          <el-input @change="findPager" v-model="pager.bnum" placeholder="请输入图书编号" clearable>
          </el-input>

        </el-col>
        <el-col :span="6">
          <el-input @change="findPager" v-model="pager.bname" placeholder="请输入图书名称查询" clearable>
          </el-input>

        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="findPager" plain icon="el-icon-search">查询</el-button>
          <el-button type="success" @click="openAddDialog()" plain icon="el-icon-plus">添加</el-button>
        </el-col>

      </el-row>
      <!-- 表格组件 -->
      <el-table stripe :data="tableData" style="width: 100%">
        <el-table-column type="expand" >
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="图书简介">
                <span>{{ props.row.ddesc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="bnum" label="图书编号">
        </el-table-column>
        <el-table-column prop="bname" label="图书名称">
        </el-table-column>
        <el-table-column prop="author" label="作者">
        </el-table-column>
        <el-table-column prop="price" label="单价">
        </el-table-column>
        <el-table-column prop="quantity" label="馆藏数量">
        </el-table-column>

        <el-table-column prop="catename" label="所属类别">
        </el-table-column>
        <el-table-column label="操作">
          <!-- 插槽作用域，通过插槽作用域可以获得一行数据，类似于layui中的templet -->
          <template slot-scope="scope">

            <el-tooltip class="item" effect="dark" content="点击编辑" placement="top-start">
              <el-button size="mini" @click="openEditDialog(scope)" type="warning" icon="el-icon-edit" plain circle>
              </el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="点击删除" placement="top-start">
              <el-button size="mini" @click="remove(scope)" icon="el-icon-delete" plain circle type="danger">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pager.page"
        :page-sizes="[5,10,15,20,25]" :page-size="pager.limit" layout="total, sizes, prev, pager, next, jumper"
        :total="pager.count">
      </el-pagination>
    </el-card>

    <!-- 定义添加对话框 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form :model="book" :rules="rules" ref="book">
        <el-form-item label="图书编号" prop="bnum" :label-width="formLabelWidth">
          <el-input placeholder="请输入图书编号" v-model="book.bnum"></el-input>
        </el-form-item>
        <el-form-item label="图书名称" prop="bname" :label-width="formLabelWidth">
          <el-input placeholder="请输入图书名称" v-model="book.bname"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author" :label-width="formLabelWidth">
          <el-input placeholder="请输入作者" v-model="book.author"></el-input>
        </el-form-item>
        <el-form-item label="单价" prop="price" :label-width="formLabelWidth">
          <el-input placeholder="请输入单价" v-model="book.price"></el-input>
        </el-form-item>
        <el-form-item label="馆藏数量" prop="quantity" :label-width="formLabelWidth">
          <el-input placeholder="请输入数量" v-model="book.quantity"></el-input>
        </el-form-item>
        <el-form-item label="所属类别" :label-width="formLabelWidth">
          <el-select clearable v-model="book.cateid"  placeholder="请选择图书类别">
            <el-option v-for="item in options" :key="item.cateid" :label="item.catename" :value="item.cateid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="ddesc" :label-width="formLabelWidth">
          <el-input placeholder="请输入图书简介" type="textarea" v-model="book.ddesc"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>
    <!-- 定义修改对话框 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="editDialogFormVisible">
      <el-form :model="book" :rules="rules" ref="book">
        <el-form-item label="图书编号" prop="bnum" :label-width="formLabelWidth">
          <el-input placeholder="请输入图书编号" disabled v-model="book.bnum"></el-input>
        </el-form-item>
        <el-form-item label="图书名称" prop="bname" :label-width="formLabelWidth">
          <el-input placeholder="请输入图书名称" v-model="book.bname"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author" :label-width="formLabelWidth">
          <el-input placeholder="请输入作者" v-model="book.author"></el-input>
        </el-form-item>
        <el-form-item label="单价" prop="price" :label-width="formLabelWidth">
          <el-input placeholder="请输入单价" v-model="book.price"></el-input>
        </el-form-item>
        <el-form-item label="馆藏数量" prop="quantity" :label-width="formLabelWidth">
          <el-input placeholder="请输入数量" v-model="book.quantity"></el-input>
        </el-form-item>
        <el-form-item label="所属类别"  :label-width="formLabelWidth">
          <el-select clearable v-model="book.cateid" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.catename" :value="item.cateid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="ddesc" :label-width="formLabelWidth">
          <el-input placeholder="请输入图书简介" type="textarea" v-model="book.ddesc"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        rules: { //定义验证规则
          bnum: [{
            required: true,
            message: '请输入图书编号',
            trigger: 'blur'
          }],
          bname: [{
            required: true,
            message: '请输入图书名称',
            trigger: 'blur'
          }],
          author: [{
            required: true,
            message: '请输入作者',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入单价',
            trigger: 'blur'
          }],
          ddesc: [{
            required: true,
            message: '请输入简介',
            trigger: 'blur'
          }],
          quantity: [{
            required: true,
            message: '请输入馆藏数量',
            trigger: 'blur'
          }]
        }, //定义表单验证规则
        book: { //定义封装类别数据对象
          bnum: '',
          bname: '',
          price: '',
          author: '',
          price: '',
          ddesc: '',
          quantity: '',
          cateid: '',
        },
        formLabelWidth: '120px', //定义表单输出框宽度
        editDialogFormVisible: false, //定义修改对话框标记
        dialogFormVisible: false, //对话框显示设置
        tableData: [], //接收后台传递来数据
        //封装分页对象
        pager: {
          bname: '', //进行条件查询
          bnum: '', //进行条件查询
          page: 1, //分页起始数据
          limit: 5, //每页显示多少条记录
          count: 0 //分页统计的记录数
        },
        options: [] //初始化图书类别下拉类别
      }
    },
    methods: {
      findAllCategory() {
        this.$http.get('http://114.55.238.138:9000/api/category/findAll').then(res => {
          this.options = res.data.data;
        }).catch(e => {
          this.$message.error('错了哦，网络异常'); //弹出网络异常提示
        })

      },
      //打开修改对话框，同时填充修改表单
      openEditDialog(scope) {
        this.book = scope.row; //获得scope.row值赋给book对象就可以填充修改表单
        //填充修改对话框数据
        this.editDialogFormVisible = !this.editDialogFormVisible; //显示修改对话框


      },
      //打开添加对话框
      openAddDialog() {
        this.book={};//添加之前清空对象数据
        this.dialogFormVisible = !this.dialogFormVisible;
      },
      //修改数据
      update() {
        this.$refs['book'].validate((valid) => {
          if (valid) {
            this.$http.post('http://114.55.238.138:9000/api/book/update', this.book)
              .then(res => {
                if (res.data.code == 200) {
                  this.findPager(); //成功调用查询
                  this.$message({ //弹出消息对话框
                    message: res.data.message,
                    type: 'success'
                  });
                  this.editDialogFormVisible = !this.editDialogFormVisible; //关闭添加对话框
               this.book={};//更新之后清空对象数据
                }
              }).catch(e => {
                this.$message.error('错了哦，网络异常'); //弹出网络异常提示
              })

          }
        });
      },
      //保存数据
      save() {
        this.$refs['book'].validate((valid) => {
          if (valid) {
            this.$http.post('http://114.55.238.138:9000/api/book/save', this.book)
              .then(res => {
                if (res.data.code == 200) {
                  this.findPager(); //成功调用查询
                  this.$message({ //弹出消息对话框
                    message: res.data.message,
                    type: 'success'
                  });
                  this.dialogFormVisible = !this.dialogFormVisible; //关闭添加对话框
                }
              }).catch(e => {
                this.$message.error('错了哦，网络异常'); //弹出网络异常提示
              })

          }
        });
      },

      //删除方法
      remove(scope) {
        this.$http.post('http://114.55.238.138:9000/api/book/remove?bid=' + scope.row.bid)
          .then(res => {
            if (res.data.code == 200) {
              this.findPager(); //调用方法查询
              this.$message({ //弹出消息对话框
                message: res.data.message,
                type: 'success'
              });
            }
          }).catch(e => {
            this.$message.error('错了哦，网络异常'); //弹出网络异常提示
          })
      },

      //每页显示记录
      handleSizeChange(val) {
        this.pager.limit = val; //每页显示最大记录数赋给this.pager.limit变量
        this.findPager(); //调用分页查询方法
      },
      //当前是第几页
      handleCurrentChange(val) {
        this.pager.page = val;
        this.findPager(); //调用分页查询方法
      },
      //分页查询方法
      findPager() {
        this.$http.get('http://114.55.238.138:9000/api/book/findPager', {
            params: {
              page: this.pager.page,
              limit: this.pager.limit,
              bnum: this.pager.bnum, //分页条件查询传递参数
              bname: this.pager.bname //分页条件查询传递参数
            }
          })
          .then(res => {
            console.info(res);
            this.pager.page = res.data.data.page; //赋值分页对象
            this.pager.count = res.data.data.count; //赋值统计记录数
            this.tableData = res.data.data.data; //给表格数组赋值
          }).catch(e => {
            this.$message.error('错了哦，网络异常');
          })
      }

    },
    //该方法不是用户自己定义方法，
    //是vue生命周期函数方法，
    //浏览器渲染该组件，立马执行该方法
    created() {
      this.findPager();
      this.findAllCategory(); //调用初始化类别选择器
    }
  }
</script>

<style scoped>
  .el-pagination {
    margin-top: 5px;
  }
</style>
